<template>
  <div id="cqd">
    <el-row>
      <el-table v-if="cqdcode=='超员报警'" :data="table.data">
        <el-table-column type="index" label="序号" width="70"></el-table-column>
        <el-table-column prop="sf" label="省份" min-width="60" show-overflow-tooltip></el-table-column>
        <el-table-column label="煤矿名称" prop="mkmc" show-overflow-tooltip></el-table-column>
        <el-table-column prop="hdry" min-width="50" label="核定人员" show-overflow-tooltip></el-table-column>
        <el-table-column prop="cyrs" min-width="50" label="超员人数" show-overflow-tooltip></el-table-column>
        <el-table-column prop="bjTime" min-width="120" label="报警开始时间" show-overflow-tooltip></el-table-column>
        <el-table-column prop="jcTime" min-width="120" label="监测时间" show-overflow-tooltip></el-table-column>
      </el-table>

      <el-table v-if="cqdcode=='超时报警'" :data="table.data1">
        <el-table-column type="index" label="序号" width="70"></el-table-column>
        <el-table-column prop="sf" label="省份" show-overflow-tooltip></el-table-column>
        <el-table-column label="煤矿名称" prop="mkmc" show-overflow-tooltip></el-table-column>
        <el-table-column prop="yf" label="统计月份" show-overflow-tooltip></el-table-column>
        <el-table-column prop="ylj" label="月累计超时（h）" show-overflow-tooltip></el-table-column>
        <el-table-column prop="rj" label="人均超时（小时/人）" show-overflow-tooltip></el-table-column>
      </el-table>

      <el-table v-if="cqdcode=='同水平多头面施工'" :data="table.data2">
        <el-table-column type="index" label="序号" width="70"></el-table-column>
        <el-table-column prop="sf" label="省份" show-overflow-tooltip></el-table-column>
        <el-table-column label="煤矿名称" prop="mkmc" show-overflow-tooltip></el-table-column>
        <el-table-column prop="sczt" label="生产状态" show-overflow-tooltip></el-table-column>
        <el-table-column prop="cmgzm" label="采煤工作面" show-overflow-tooltip></el-table-column>
        <el-table-column prop="jjgzm" label="掘进工作面" show-overflow-tooltip></el-table-column>
        <el-table-column prop="ysjjgzm" label="疑似掘进工作面" show-overflow-tooltip></el-table-column>
        <el-table-column prop="yscmgzm" label="疑似采煤工作面" show-overflow-tooltip></el-table-column>
        <el-table-column label="详情" show-overflow-tooltip>
          <template v-slot:default="{ row }">
            <el-link @click="openGis" type="primary">详情</el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <!-- 分页信息栏 -->
    <el-row class="pagination-bar">
      <el-col :span="8" class="page-info">显示第&nbsp;1&nbsp;至&nbsp;10&nbsp;项结果，共&nbsp;{{num}}&nbsp;项</el-col>
      <el-col :span="16" class="text-right">
        <el-pagination
          layout="prev,pager,next,jumper"
          :total="table.total"
          :current-page.sync="table.currentPage"
          :page-size="table.pageSize"
          @current-change="initData"
        ></el-pagination>
      </el-col>
    </el-row>
    <local-dialog
      :title="diagis.title"
      :visible.sync="diagis.show"
      :close-on-click-modal="false"
      width="80%"
      v-if="diagis.show"
    >
      <div style="height: 100%;">
        <iframe
          scrolling="no"
          frameborder="0"
          style="width:100%;height:70vh"
          src="http://59.52.10.141:7070/gis/#/ysgis?v_name=%E6%BC%94%E7%A4%BA%E7%85%A4%E7%9F%BF&id=360321008135&mine_id=360321008135"
        ></iframe>
      </div>
    </local-dialog>
  </div>
</template>
<script>
export default {
  props: {
    cqdcode: {
      type: String,
      default: ""
    },
    numcode: {
      type: Number,
      default: ""
    }
  },
  data() {
    return {
      num: this.numcode,
      diagis: { title: "", show: false },
      table: {
        data: [], //数据
        data1: [],
        data2: [],
        total: this.numcode, //总条数
        currentPage: 1, //当前页码
        pageSize: 10 //每页条数
      }
    };
  },
  mounted() {
    this.initData();
    this.initData1();
    this.initData2();
  },
  computed: {
    // 数据起点
    currentStart() {
      return this.table.total == 0
        ? 0
        : (this.table.currentPage - 1) * this.table.pageSize + 1;
    },
    // 数据终点
    currentEnd() {
      return this.currentStart == 0
        ? 0
        : this.currentStart + this.table.pageSize - 1 > this.table.total
        ? this.table.total
        : this.currentStart + this.table.pageSize - 1;
    }
  },
  methods: {
    openGis() {
      this.diagis.title = "综合一张图";
      this.diagis.show = true;
    },
    initData() {
      this.request({
        url: "data/getData/3.6",
        method: "get"
      }).then(data => {
        this.table.data = data.data;
      });
    },
    initData1() {
      this.request({
        url: "data/getData/3.7",
        method: "get"
      }).then(data => {
        this.table.data1 = data.data;
      });
    },
    initData2() {
      this.request({
        url: "data/getData/3.8",
        method: "get"
      }).then(data => {
        this.table.data2 = data.data;
      });
    }
  }
};
</script>
<style lang="less" scoped>
#cqd /deep/ ::-webkit-scrollbar-thumb {
  background-color: #dddddd !important;
}
</style>